import React from "react";
import { Section, Input, Checkbox } from "@/components/visualizations/editor";
import { EditorPropTypes } from "@/visualizations/prop-types";

export default function GeneralSettings({ options, data, visualizationName, onOptionsChange }) {
  return (
    <React.Fragment>
      <Section>
        <label>视频来源地址：</label>
        <Input type="text" style={{width:300}}
          value={options.url}
          onChange={e => onOptionsChange({"url": e.target.value})}
        />
        <label>(支持url取数函数)<a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a></label>
        <label>例：https://www.dazdata.com&#63;id=&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;</label>
      </Section>
      <Section>
        <label>背景图片：</label>
        <Input type="text" style={{width:300}}
          value={options.poster_url}
          onChange={e => onOptionsChange({"poster_url": e.target.value})}
        />
      </Section>
      <Section>
        <Checkbox
          name="auto_controls"
          checked={options.auto_controls}
          onChange={e => onOptionsChange({"auto_controls": e.target.checked})}>
          显示进度条
        </Checkbox>  
        <Checkbox
          name="auto_play"
          checked={options.auto_play}
          onChange={e => onOptionsChange({"auto_play": e.target.checked})}>
          自动播放
        </Checkbox>  
        <Checkbox
          name="auto_loop"
          checked={options.auto_loop}
          onChange={e => onOptionsChange({"auto_loop": e.target.checked})}>
          循环播放
        </Checkbox>  
        <Checkbox
          name="auto_preload"
          checked={options.auto_preload}
          onChange={e => onOptionsChange({"auto_preload": e.target.checked})}>
          自动加载
        </Checkbox>  
        <Checkbox
          name="auto_muted"
          checked={options.auto_muted}
          onChange={e => onOptionsChange({"auto_muted": e.target.checked})}>
          自动静音
        </Checkbox>  
      </Section>
      <Section>
        <label>使用视频注意事项：</label><br/>
        <label>1、目前支持视频格式（如：mp4,hls）；</label><br/>  
        <label>2、背景图使用url（如：https://cdn.*.com/a.png）；</label><br/>  
        <label>3、如果跨域使用媒体文件，需要配置环境变量（参考安装部署手册）；</label><br/>  
        <br/>
      </Section>
    </React.Fragment>
  );
}

GeneralSettings.propTypes = EditorPropTypes;
